import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';

import { Line } from '@ant-design/charts';

export default function Echarts() {
  const mainRef = useRef()
  const myChart = useRef()    
  const data = [
      { year: '1991', value: 3 },
      { year: '1992', value: 4 },
      { year: '1993', value: 3.5 },
      { year: '1994', value: 5 },
      { year: '1995', value: 4.9 },
      { year: '1996', value: 6 },
      { year: '1997', value: 7 },
      { year: '1998', value: 9 },
      { year: '1999', value: 13 },
    ];
    // 要设置百分比值要套一层父级设置高度来控制
  
    const config = {
      data,
      height: 400,
      width:600,
      xField: 'year',
      yField: 'value',
      style: {
        lineWidth: 2
      }
    };
  // useEffect(() => {

  // }, [])


  return (

   <div style={{width:'100%'}}>
    
     <div ref={mainRef} style={{ width: 600, height: 400 }}>
     <Line {...config} />
     </div>
   </div>
  )
}
